<template>
  <div>
    <ul class="vtree">
      <TreeCore :tree-node="treeNode"></TreeCore>
    </ul>
  </div>
</template>
<script lang="ts">

import { defineComponent, ref } from 'vue'
import TreeCore from './tree-core.vue'

type TreeNode = {
  title: string,
  key: string,
  children: TreeNode[] | unknown[],
  isShow: boolean
}
type TreeNodeList = Array<TreeNode>
export default defineComponent({
  components: { TreeCore },
  name: 'VueTree',
  setup() {
    const treeNode = ref([
      {
        title: '我是1',
        key: '1',
        children: [
          {
            title: '我是1-1',
            key: '1-1',
            children: [
              {
                title: '我是1-1-1',
                key: '1-1-1',
              },
              {
                title: '我是1-1-2',
                key: '1-1-2',
              }
            ]
          },
          {
            title: '我是1-2',
            key: '1-2',
            children: [
              {
                title: '我是1-2-1',
                key: '1-2-1',
              },
              {
                title: '我是1-2-2',
                key: '1-2-2',
              }
            ]
          },
          {
            title: '我是1-3',
            key: '1-3'
          }
        ]
      },
      {
        title: '我是2',
        key: '2',
        children: [
          {
            title: '我是2-1',
            key: '2-1',
            children: [
              {
                title: '我是2-1-1',
                key: '2-1-1',
              },
              {
                title: '我是2-1-2',
                key: '2-1-2',
              }
            ]
          },
        ]
      },
      {
        title: '我是3',
        key: '3',
        children: [
          {
            title: '我是3-1',
            key: '3-1'
          },
        ]
      }
    ] as TreeNodeList)
    return { treeNode }
  }
})


</script>
<style scoped>
@import "../../static/css/v-tree.css";
</style>
